<!-- <template>
  <div class="p-4">
    <h1 class="text-2xl mb-4">🎵 音乐播放器</h1>

    <input type="file" @change="uploadMusic" />
    
    <ul>
      <li v-for="music in musicList" :key="music.id">
        <span>{{ music.title }}</span>
        <audio :src="apiUrl + '/uploads/' + music.fileName" controls></audio>
        <button @click="deleteMusic(music.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const apiUrl = 'http://localhost:8080'
const musicList = ref([])

const fetchMusic = async () => {
  const res = await axios.get(`${apiUrl}/api/music`)
  musicList.value = res.data
}

const uploadMusic = async (e) => {
  const file = e.target.files[0]
  if (!file) return
  const formData = new FormData()
  formData.append('file', file)
  await axios.post(`${apiUrl}/api/music/upload`, formData)
  fetchMusic()
}

const deleteMusic = async (id) => {
  await axios.delete(`${apiUrl}/api/music/${id}`)
  fetchMusic()
}

onMounted(fetchMusic)
</script> -->



<!-- <template>
  <h3>祖宗</h3>
  <Parent />
</template>

<script>
import Parent from './components/Parent.vue';

export default{
components:{
  Parent
},
provide:{
  msg:"爷爷的财产"
}
}
</script> -->